<template>
	<view class="o2o-category-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
				<view class="navbar-title">全部分类</view>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 分类内容 -->
		<view class="category-content">
			<!-- 左侧分类列表 -->
			<view class="category-left">
				<scroll-view scroll-y class="category-scroll">
					<view class="category-item" 
						v-for="(item, index) in categoryList" 
						:key="item.id"
						:class="{active: currentCategoryIndex === index}" 
						@click="selectCategory(index)">
						<image :src="getCategoryIcon(item)" class="category-icon" v-if="getCategoryIcon(item)"></image>
						<text class="category-name">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 右侧子分类列表 -->
			<view class="subcategory-right">
				<scroll-view scroll-y class="subcategory-scroll">
					<view class="subcategory-section" v-if="currentCategory && currentCategory.child">
						<view class="subcategory-grid">
							<view class="subcategory-item" 
								v-for="(subItem, subIndex) in currentCategory.child" 
								:key="subItem.id"
								@click="goSubCategory(subItem)">
								
								<text class="subcategory-name">{{ subItem.name }}</text>
								
								<!-- 三级分类 -->
								<view class="third-category" v-if="subItem.child && subItem.child.length > 0">
									<view class="third-category-item" 
										v-for="(thirdItem, thirdIndex) in subItem.child" 
										:key="thirdItem.id"
										@click.stop="goThirdCategory(thirdItem)">
										<text class="third-category-name">{{ thirdItem.name }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 空状态 -->
					<view class="empty-state" v-else>
						<u-icon name="grid" size="48" color="#ddd"></u-icon>
						<text class="empty-text">暂无子分类</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import { inject } from 'vue'

	export default {
		data() {
			return {
				defaults: inject('$defaults'),
				statusBarHeight: 0,
				currentCategoryIndex: 0,
				categoryList: [],
				loading: false
			}
		},
		computed: {
			currentCategory() {
				return this.categoryList[this.currentCategoryIndex] || {}
			}
		},
		onLoad() {
			this.initNavbar()
			this.loadCategoryData()
		},
		onPullDownRefresh() {
			this.loadCategoryData().finally(() => {
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			// 初始化导航栏
			initNavbar() {
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight || 0
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 加载分类数据
			async loadCategoryData() {
				if (this.loading) return

				try {
					this.loading = true
					uni.showLoading({ title: '加载中...' })

					const result = await api.o2oApi.getCategoryList()

					if (result.r === 0 && result.data && result.data.list) {
						this.categoryList = result.data.list
						// 默认选中第一个分类
						if (this.categoryList.length > 0) {
							this.currentCategoryIndex = 0
						}
					} else {
						uni.showToast({
							title: result.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载分类数据失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},

			// 选择分类
			selectCategory(index) {
				this.currentCategoryIndex = index
			},

			// 获取分类图标
			getCategoryIcon(item) {
				if (item.file_path) {
					return this.defaults.defaults.baseUrl + item.file_path
				}
				return ''
			},

			// 获取子分类图标
			getSubCategoryIcon(item) {
				if (item.file_path) {
					return this.defaults.defaults.baseUrl + item.file_path
				}
				return ''
			},

			// 跳转到子分类
			goSubCategory(subItem) {
				// 跳转到商家列表页面，传递分类ID
				uni.navigateTo({
					url: `/pages/o2o/shenghuofw?categoryId=${subItem.id}&categoryName=${encodeURIComponent(subItem.name)}`
				})
			},

			// 跳转到三级分类
			goThirdCategory(thirdItem) {
				// 跳转到商家列表页面，传递分类ID
				uni.navigateTo({
					url: `/pages/o2o/shenghuofw?categoryId=${thirdItem.id}&categoryName=${encodeURIComponent(thirdItem.name)}`
				})
			}
		}
	}
</script>

<style scoped>
	.o2o-category-container {
		height: 100vh;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		backdrop-filter: blur(10px);
		box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
	}

	.navbar-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
	}

	.navbar-left {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		text-align: center;
	}

	.navbar-right {
		width: 44px;
	}

	/* 分类内容 */
	.category-content {
		flex: 1;
		display: flex;
		margin-top: 88px; /* 导航栏高度 + 状态栏高度 */
		height: calc(100vh - 88px);
		overflow: hidden;
	}

	/* 左侧分类列表 */
	.category-left {
		width: 120px;
		background: #fff;
		border-right: 1px solid #f0f0f0;
		height: 100%;
		overflow: hidden;
	}

	.category-scroll {
		height: 100%;
		width: 100%;
	}

	.category-item {
		padding: 16px 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1px solid #f8f9fa;
		transition: all 0.3s ease;
	}

	.category-item.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
	}

	.category-item.active .category-name {
		color: #fff;
	}

	.category-icon {
		width: 32px;
		height: 32px;
		margin-bottom: 8px;
		border-radius: 6px;
	}

	.category-name {
		font-size: 12px;
		color: #333;
		text-align: center;
		line-height: 1.2;
	}

	/* 右侧子分类列表 */
	.subcategory-right {
		flex: 1;
		background: #fff;
		height: 100%;
		overflow: hidden;
	}

	.subcategory-scroll {
		height: 100%;
		width: 100%;
	}

	.subcategory-section {
		padding: 16px;
	}

	.subcategory-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}

	.subcategory-item {
		width: calc(35% - 8px);
		background: #fff;
		border-radius: 12px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		border: 1px solid #f0f0f0;
		transition: all 0.3s ease;
	}

	.subcategory-item:active {
		transform: scale(0.98);
		box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
	}

	.subcategory-image {
		width: 48px;
		height: 48px;
		border-radius: 8px;
		margin-bottom: 12px;
	}

	.subcategory-placeholder {
		width: 48px;
		height: 48px;
		background: #f8f9fa;
		border-radius: 8px;
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.subcategory-name {
		font-size: 14px;
		font-weight: 500;
		color: #333;
		margin-bottom: 8px;
		line-height: 1.3;
	}

	/* 三级分类 */
	.third-category {
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid #f0f0f0;
	}

	.third-category-item {
		padding: 4px 8px;
		margin: 2px 0;
		background: #f8f9fa;
		border-radius: 4px;
		transition: all 0.2s ease;
	}

	.third-category-item:active {
		background: #e9ecef;
	}

	.third-category-name {
		font-size: 12px;
		color: #666;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300px;
	}

	.empty-text {
		font-size: 14px;
		color: #999;
		margin-top: 16px;
	}
</style>